<template>
  <div class>
    <div
      class="phone_part"
      @click.prevent="show_btn1(5,Item)"
      v-for="(Item,y) in partListCon"
      :key="y"
    >
      <div class="phone_part_body">
        <div class="phone_title" v-show="Item.title|| Item.title_en">
          <p>
            {{Item.title}}
            <span>{{Item.title_en}}</span>
          </p>
        </div>
        <div class="phone_part_content" v-if="Item.style == 0">
          <div class="phone_part_one_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 1">
          <div class="phone_part_two_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 2">
          <div class="phone_part_three_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 6">
          <div class="phone_part_six1_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 3">
          <div class="phone_part_four_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 4">
          <div class="phone_part_five_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="phone_part_content" v-else-if="Item.style == 5">
          <div class="phone_part_six_img" v-for="(item,i) in Item.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt />
          </div>
        </div>
        <div class="index_control index_head" v-show="Item.part_show">
          <div class="control_item control_sanjiao on">
            <el-form>
              <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                <el-col :span="12">
                  <!--是否显示本栏目-->
                  <el-switch
                    v-model="Item.is_show"
                    active-color="#13ce66"
                    inactive-color="#999999"
                    hone_switch
                    :width="70"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>
                </el-col>
                <el-col :span="12" class="tr pd_right_15 sizeColor_red">
                  <el-button
                    :loading="$store.state.isLoading"
                    type="danger"
                    size="small"
                    @click="del_part(Item.id,y)"
                  >删除</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="主标题" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-input v-model="Item.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="副标题" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-input v-model="Item.title_en" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-input v-model="Item.sort"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="样式选择" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-select v-model="Item.style" placeholder="请选择">
                    <el-option
                      v-for="item in style_option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <upcard
                class="module"
                @sendDel="getSendDel(y)"
                @send_baner_id="get_banner_id"
                :data="Item.banner"
                :cart="list_card"
                :is_index="true"
              ></upcard>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="bg_con add_banner" @click="add_part">
      <i class="el-icon-plus"></i>
    </div>
  </div>
</template>

<script>
import upcard from "@/components/currency/IndexSet_upload.vue";
export default {
  name: "",
  props: ["partListCon"],
  data() {
    return {
      list_card: "list_card",
      formLabelWidth: "120px",
      // 模块
      partList: [
        {
          banner: [
            {
              piclink: "",
              title: ""
            }
          ],
          title: "",
          title_en: ""
        }
      ],
      style_option: [
        {
          label: "1行1图",
          value: "0"
        },
        {
          label: "1行2图",
          value: "1"
        },
        {
          label: "1行3图",
          value: "2"
        },
        {
          label: "1行4图",
          value: "6"
        },
        {
          label: "1+2",
          value: "3"
        },
        {
          label: "1+3",
          value: "4"
        },
        {
          label: "2+3",
          value: "5"
        }
      ]
    };
  },
  components: {
    upcard
  },
  created() {},
  mounted() {},
  methods: {
    get_banner_id(item) {
      if (item.id != 0 && item.id != undefined) {
        this.$emit('del_banner',item)
      }
    },
    del_part(id, num) {
      //删除模块
      this.partListCon[num].part_show = false;
      this.partListCon.splice(num, 1);
      if (id != 0) {
        // this.del_module += id + "@";
        this.$emit("del_part", id, num);
      }
    },
    show_btn1(index, item) {
      try {
        this.partListCon.forEach(function(Utem) {
          Utem.part_show = false;
        });

        item.part_show = true;
        this.partListCon.slice();
        this.$emit("show_btn", index, item);
      } catch (error) {
        new Error("all-module-item 184行");
      }
    },

    add_part() {
      this.partListCon.push({
        id: "0",
        iden: this.$route.query.action,
        is_show: "1",
        part_show: false,
        title: "",
        title_en: "",
        style: "0",
        types: "module",
        sort: "0",
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: "",
            desc: "",
            sort: "0"
          }
        ]
      });
    },
    getSendDel(obj, index, id) {
      if (obj.id == 0 || obj.id == undefined) return;
      this.$emit("getSendDel", obj, index, id);
    }
  }
};
</script>
<style lang='less' scoped>
.phone_part {
  width: 100%;
  background-color: white;
  margin: 10px 0;
  position: relative;
  border: 1px solid transparent;
}
.phone_part_body {
  width: 94%;
  margin: 0 auto;
}
.phone_part:hover {
  border: 1px dashed red;
}
.phone_title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.phone_title p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
  padding: 5px 0;
}
.phone_title span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.phone_part_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_one_img {
  width: 100%;
  padding-bottom: 10px;
}
.phone_part_one_img a {
  display: block;
}
.phone_part_one_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.phone_part_two_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.phone_part_two_img {
  width: 48%;
  padding: 5px 0;
}
.phone_part_two_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_three_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_three_img {
  width: 32%;
  padding: 5px 0;
}
.phone_part_three_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_six1_img{
  width: 24%;
  padding: 5px 0;
}
.phone_part_six1_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_four_img:nth-of-type(3n + 1),
.phone_part_five_img:nth-of-type(3n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}

.phone_part_four_img:nth-of-type(3n + 2),
.phone_part_four_img:nth-of-type(3n + 3) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_four_img img {
  width: 100%;
  border-radius: 8px;
}
// 1+3
.phone_part_five_img:nth-of-type(4n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_five_img:nth-of-type(4n + 2),
.phone_part_five_img:nth-of-type(4n + 3),
.phone_part_five_img:nth-of-type(4n + 4) {
  width: 32%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_five_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

// 2+3 phone_part_six_img

.phone_part_six_img:nth-of-type(5n + 1),
.phone_part_six_img:nth-of-type(5n + 2) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_six_img:nth-of-type(5n + 3),
.phone_part_six_img:nth-of-type(5n + 4),
.phone_part_six_img:nth-of-type(5n + 5) {
  width: 32%;
  border-radius: 8px;
  padding: 5px 0;
}

.phone_part_six_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.phone_part_five_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}
.phone_part_five_left {
  width: 49%;
  height: 100%;
  border-radius: 8px;
}
.phone_part_five_left_img {
  width: 100%;
  height: 100%;
  padding: 5px 0;
}
.phone_part_five_right {
  width: 49%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.phone_part_five_right_img {
  width: 100%;
  height: 50%;
  padding: 5px 0;
}
.phone_part_five_left_img img,
.phone_part_five_right_img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.index_control {
  position: absolute;
  left: 400px;
}
.index_head {
  right: 10px;
  display: block;
}
.index_head:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.control_sanjiao::after {
  position: absolute;
  content: " ";
  top: 16px;
  left: -16px;
  display: block;
  width: 0;
  height: 0;
  border: 8px solid #f8f8f8;
  border-color: transparent #e0dbdb transparent transparent;
  z-index: 111;
}
.index_control {
  position: absolute;
  left: 400px;
}
.control_item {
  position: absolute;
  width: 630px;
  padding: 10px 10px 80px 10px;
  background-color: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  margin-top: 65px;
}
.img_nav {
  width: 200px;
  height: 100px;
  position: relative;
  padding: 1px;
  border: 1px solid #ddd;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
